<template>
  <div>
    <div ref="teacherRatingChart" style="height: 400px; margin-bottom: 20px;"></div>
    <div ref="courseRatingChart" style="height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getTeacherCourseCommentStatistic, getCourseCommentStatistic } from "@/apis/admin";

export default {
  name: "RatingCharts",
  data() {
    return {
      teacherChart: null,
      courseChart: null,
      teacherRatingsData: [],
      courseRatingsData: [],
    };
  },
  mounted() {
    this.fetchTeacherRatingsData();
    this.fetchCourseRatingsData();
  },
  methods: {
    fetchTeacherRatingsData() {
      getTeacherCourseCommentStatistic().then(res => {
        this.initTeacherChart(res.data.data.list);
      })
    },
    fetchCourseRatingsData() {
      getCourseCommentStatistic().then(response => {
        this.initCourseChart(response.data.data.list);
      })
    },
    initTeacherChart(data) {
      this.teacherChart = echarts.init(this.$refs.teacherRatingChart);
      const option = {
        title: {text: '教师评分统计'},
        tooltip: {},
        legend: {data: ['平均评分']},
        xAxis: {type: 'category', data: data.map(item => `${item.teacherName}`)},
        yAxis: {type: 'value'},
        series: [{name: '平均评分', type: 'bar', data: data.map(item => item.averageRating)}]
      };
      this.teacherChart.setOption(option);
    },
    initCourseChart(data) {
      this.courseChart = echarts.init(this.$refs.courseRatingChart);
      const option = {
        title: {text: '课程平均评分'},
        tooltip: {},
        xAxis: {type: 'category', data: data.map(item => item.courseName)},
        yAxis: {type: 'value'},
        series: [{name: '平均评分', type: 'bar', data: data.map(item => item.averageRating)}]
      };
      this.courseChart.setOption(option);
    }
  }
}
</script>

<style scoped>
#teacherRatingChart, #courseRatingChart {
  width: 100%;
  height: 400px;
}
</style>
